<article>
  <section class="markdown"><h1>Select 选择器</h1>
    <section class="markdown"><p>类似 Select2 的选择器。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <a  class="anchor">#</a>
      </h2>
      <p>弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。</p>
    </section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'基本使用'" id="components-select-demo-basic" [nzCode]="NzDemoSelectBasicCode">
        <nz-demo-select-basic demo></nz-demo-select-basic>
        <div intro>
          <p>基本使用。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'带搜索框'" id="components-select-demo-search" [nzCode]="NzDemoSelectSearchCode">
        <nz-demo-select-search demo></nz-demo-select-search>
        <div intro>
          <p>展开后可对选项进行搜索。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'搜索框'" id="components-select-demo-search-change" [nzCode]="NzDemoSelectSearchChangeCode">
        <nz-demo-select-search-change demo></nz-demo-select-search-change>
        <div intro>
          <p>搜索和远程数据结合，通过设置 <code>nzFilter</code>为 <code>false</code>关闭只显示匹配选项</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'标签'" id="components-select-demo-tag" [nzCode]="NzDemoSelectTagCode">
        <nz-demo-select-tag demo></nz-demo-select-tag>
        <div intro>
          <p>tags select，随意输入的内容，回车键新增tag</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'三种大小'" id="components-select-demo-size" [nzCode]="NzDemoSelectSizeCode">
        <nz-demo-select-size demo></nz-demo-select-size>
        <div intro>
          <p>种大小的选择框，当 nzSize 分别为 <code>large</code>和 <code>small</code>时，输入框高度为 <code>32px</code>和 <code>22px</code>，默认高度为
            <code>28px</code></p></div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'多选'" id="components-select-demo-multiple" [nzCode]="NzDemoSelectMultipleCode">
        <nz-demo-select-multiple demo></nz-demo-select-multiple>
        <div intro>
          <p>多选，从已有条目中选择（scroll the menu）</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'多选搜索框'" id="components-select-demo-multiple-change" [nzCode]="NzDemoSelectMultipleChangeCode">
        <nz-demo-select-multiple-change demo></nz-demo-select-multiple-change>
        <div intro>
          <p>多选搜索框和远程数据结合，注意此时需要保留未列在当前选项中但已被加入多选框中的数据，需要添加 <code>nzKeepUnListOptions</code>属性</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API"><span>API</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <h3 id="Select props"><span>nz-select</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ngModel</td>
          <td>指定当前选中的条目，支持双向绑定</td>
          <td>
            Array（多选）/String/Object（单选）
          </td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzSearchChange</td>
          <td>搜索内容变化回调函数，参数为搜索内容</td>
          <td>
            Func
          </td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzMode</td>
          <td>设置 Select 的模式</td>
          <td>
            'multiple' | 'tags'
          </td>
          <td>-</td>
        </tr>        <tr>
          <td>nzOpenChange</td>
          <td>下拉菜单打开关闭回调函数</td>
          <td>
            Func
          </td>
          <td>无</td>
        </tr>
        <!--<tr>-->
          <!--<td>nzMultiple</td>-->
          <!--<td>支持多选</td>-->
          <!--<td>Boolean</td>-->
          <!--<td>false</td>-->
        <!--</tr>-->
        <!--<tr>-->
          <!--<td>nzTags</td>-->
          <!--<td>Tags模式</td>-->
          <!--<td>Boolean</td>-->
          <!--<td>false</td>-->
        <!--</tr>-->
        <tr>
          <td>nzFilter</td>
          <td>是否根据输入过滤选项</td>
          <td>Boolean</td>
          <td>true</td>
        </tr>
        <tr>
          <td>nzKeepUnListOptions</td>
          <td>当添加该属性时，将保留不在当前选项框但已被选择的数据，仅对多选有效</td>
          <td>attribute</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzAllowClear</td>
          <td>当添加该属性时，支持清除, 单选模式有效</td>
          <td>attribute</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzPlaceHolder</td>
          <td>选择框默认文字</td>
          <td>String</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzNotFoundContent</td>
          <td>当下拉列表为空时显示的内容</td>
          <td>String</td>
          <td>'Not Found'</td>
        </tr>
      </tbody>
    </table>
    <h3 id="Option props"><span>nz-option</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzLabel</td>
          <td>用于显示展示的option内容</td>
          <td>String</td>
          <td></td>
        </tr>
        <tr>
          <td>nzValue</td>
          <td>option的value值，与nz-select选择option后的ngModel属性对应</td>
          <td>String/Object</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzDisabled</td>
          <td>是否禁用</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
      </tbody>
    </table>
  </section>
</article>
